<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01_direction_wrap</title>
    <style>
        .box1{
            background-color:yellow;
        }
        .box1>div{
            width: 100px;
            height: 100px;
            border: 2px solid #000;
            font-size: 30px;
        }
        .box2{
            background-color: aqua;
            /*指定box2作为弹性布局*/
            /*效果:子元素一横排,不用我们自己浮动 清除浮动*/
            /*想让谁里面的元素横向排列,就给谁设置此属性,也就是给爸爸*/
            display: flex;

            /*01 flex 的行模式与列模式 */
            flex-direction: row;/*行模式 正向排序 默认值*/
            flex-direction: column;/*列模式 正向排序*/
            flex-direction: column-reverse;/*列模式 反向排序*/
            flex-direction: row-reverse;/*行模式 反向排序*/

            /*02 flex的换行*/
            /*如果把浏览器窗口缩小到不够6个div大小的宽度,6个div还是在同一行,并没有掉块*/
            /*原因:flex自带了很多属性,关于换行的默认值就是不换行*/
            flex-direction: row;
            flex-wrap:nowrap;/*默认值不换行*/
            flex-wrap: wrap;/*换行,一行显示不下到下一行显示 12345 67*/
            flex-wrap:wrap-reverse;/*换行且行数反向排列 67 12345*/
        }
        .box2>div{
            width: 120px;
            height: 120px;
            border: 2px solid red;
            font-size: 30px;
        }

    </style>
</head>
<body>
    <div class="box1">
        <div>a</div>
        <div>b</div>
        <div>c</div>
    </div>
    <div class="box2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
    </div>
</body>
</html>